<template>
  <div class="commentList">
    <div class="content bg-white">
      <div class="goods-info box flex-row">
        <div class="left justify-center items-center">
          <img
            :src="info.coverUrl || changeUrl"
            alt=""
            class="img"
            mode="aspectFit"
          />
        </div>
        <div class="right flex-col">
          <span class="title ellipsis_1">{{
            info.goodsName || "苹果13Promax 5G手机全新国行全"
          }}</span>
          <view class="text">
            <span class="taocaies">套餐：</span>
            <span class="taocai">{{
              info.specName ||
              "最多四十个字最多四十个字最多四十个字最最多四十个字最多四十个字最多四十个字最多四十个字最多四十"
            }}</span>
          </view>
        </div>
      </div>
      <div class="miaoshu">
        <span>描述相符</span>
        <span class="rate"
          ><u-rate active-color="#FFC44F" size="26"></u-rate
        ></span>
        <span>满意</span>
      </div>
      <div class="describe">
        <u-textarea
          v-model="value2"
          placeholder="多个角度评价宝商品，可以帮助更多想租的人~"
          height="156"
          maxlength="500"
        ></u-textarea>
      </div>
      <div class="uploades">
        <u-upload
          :fileList="fileList1"
          @afterRead="afterRead"
          @delete="deletePic"
          name="1"
          multiple
          :maxCount="10"
        ></u-upload>
      </div>
      <div class="radio">
        <span
          ><u-radio-group
            v-model="radiovalue1"
            placement="column"
            @change="groupChange"
          >
            <u-radio
              :customStyle="{ marginBottom: '8px' }"
              v-for="(item, index) in radiolist1"
              :key="index"
              :label="item.name"
              :name="item.name"
              @change="radioChange"
            >
            </u-radio> </u-radio-group
        ></span>
        <span class="anonymous">匿名评价后，平台将不展示您的个人信息</span>
      </div>
    </div>
    <div class="order-item flex-col">
      <div class="title items-center">
        <img
          :src="info.storeLogo || changeUrl"
          alt=""
          class="logo"
          mode="aspectFit"
        />
        <span class="store-name">{{ info.storeName || "" }} ></span>
      </div>
      <div class="content flex">
        <div class="miaoshu">
          <span>服务态度</span>
          <span class="rate"
            ><u-rate active-color="#FFC44F" size="26"></u-rate
          ></span>
          <span>满意</span>
        </div>
        <div class="miaoshu">
          <span>物流速度</span>
          <span class="rate"
            ><u-rate active-color="#FFC44F" size="26"></u-rate
          ></span>
          <span>满意</span>
        </div>
      </div>
    </div>
    <div class="btn" @tap="saveData">确定提交</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeUrl: "../../static/icones/pic1.png",
      value2: "",
      fileList1: [],
      radiolist1: [
        {
          name: "匿名",
          disabled: false,
        },
      ],
      radiovalue1: "匿名",
    };
  },
  methods: {
    saveData() {},
    groupChange(n) {
      console.log("groupChange", n);
    },
    radioChange(n) {
      console.log("radioChange", n);
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
          },
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.commentList {
  width: 100vw;
  //   height: 100vh;
  //   overflow: scroll;
  background-color: #f5f5f5;
  padding: 12px;
  .content {
    width: 100%;
    min-height: 106px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    padding: 12px;
    display: flex;
    flex-direction: column;

    .left {
      width: 82px;
      height: 82px;
      margin-right: 12px;
      // background: #f9f9f9;
      border-radius: 5px;
      .img {
        width: 82px;
        height: 82px;
      }
    }
    .right {
      flex: 1;
      color: #3d3d3d;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .title {
        font-family: PingFang SC Bold;
        font-size: 14px;
        line-height: 18px;
      }
      .text {
        width: 100%;
        font-family: PingFang SC Medium;
        color: #9d9d99;
        font-size: 14px;
        line-height: 18px;
        display: flex;
        .taocaies {
          width: 45px;
          height: 30px;
        }
        .taocai {
          width: 200px;
        }
      }
    }
    .miaoshu {
      width: 100%;
      height: 50px;
      font-size: 14px;
      color: #3d3d3d;
      font-family: PingFang SC Bold;
      display: flex;
      align-items: center;
      .rate {
        padding: 0 6px;
      }
    }
    .describe {
      width: 100%;
      min-height: 156px;
    }
    .uploades {
      min-height: 99px;
      margin: 12px 0;
    }
    .radio {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .anonymous {
        font-size: 12px;
        color: #cccccc;
        font-family: PingFang SC Medium;
      }
    }
  }

  .order-item {
    width: 100%;
    min-height: 151px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    background: #ffffff;
    margin-top: 12px;
    .title {
      height: 45px;
      width: 100%;
      padding: 0 15px;
      //   border-bottom: 1px solid #f5f5f5;
      .logo {
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
      .store-name {
        color: #000000;
        font-size: 14px;
        margin-left: 4px;
        line-height: 20px;
      }
    }
    .content {
      padding: 15px;
      width: 100%;
      min-height: 107px;
      border-bottom: 1px solid #e4e4e4;
    }
  }
  .btn {
    width: 100%;
    height: 40px;
    line-height: 42px;
    text-align: center;
    border-radius: 20px;
    background-color: #0096ff;
    color: #fff;
    font-size: 16px;
    margin: 12px 0;
    // position: fixed;
    // bottom: 50px;
    // left: 15px;
  }
}
</style>
